<template>

	<view class="">
		<view class="swiper" v-if="types==1">
			<block v-if="banners[0] && banners[0].url">
				<swiper class="swiper-container2" :current="swiperid" :autoplay="false" :interval="4000" :circular="true" :indicator-dots="true" @change="swiperchange"
				 indicator-active-color="#55aaff" indicator-color="#cccccc" :style="{'height':swiperHeight+'px','width':'750rpx'}">
					<block v-for="(item, index3) in banners" :key="index3">
						<swiper-item  class="swiper-wrapper" v-if="item &&  item.url">
							<!-- 309rpx -->
							<image :class="'swiper-wrapper' + index3" @tap="BannerNavigate(item.type, item.link)" :src="item.url" style="width: 100%" mode="widthFix"></image>
						</swiper-item>
					</block>
				</swiper>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: '',
		props: {
			banners: {
				type: Array,
				default () {
					return []
				}
			},
			types: {
				type: Number,
				default: 1
			},
			sid: {
				type: String,
				default: ''
			}
		},
		watch:{
			banners:{
				 handler() {
					 console.log('监听数据');
					if(this.banners.length>0){
						let dom = '.swiper-wrapper0';
						setTimeout( ()=>{
							this.getElementHeight(dom);
						},100)
						
					}
				},
				deep:true,
				immediate:true
			}
		},
		data() {
			return {
				swiperid:0,
				swiperHeight:100
			}
		},
		onLoad() {
			// console.log('轮播参数·············································', this.banners, this.sid, this.types);
		},
		created() {
			
		},
		methods: {
			swiperchange(e) {
				let current = e.detail.current;
				this.swiperid = current;
				// console.log(current);
				let dom = '.swiper-wrapper'+current;
				this.getElementHeight(dom);
			},
			getElementHeight(element) {
				console.log('加载1································································');
				setTimeout(() => {
					let query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect();
					query.exec((res) => {
						if (!res) { //如果没获取到，再调一次
							console.log('没有获取到');
							this.getElementHeight();
						} else {
							this.swiperHeight = res[0].height;
						}
						console.log(res,this.swiperHeight, res[0].height,'轮播图高度',element);
					})
				},1)
			},
			async backimgheight(item) {
				var IMG = new Image();
				console.log(item)
				IMG.src = item.url;
				return await new Promise((resolve, reject) => {
					IMG.onload = function(res) {
						console.log('img···········', IMG.width, IMG.height)
						resolve(IMG.height)
					}
				})
			},
			// banner 图跳转
			BannerNavigate(type, link, item) {
				
			},
			toGoodDetails(type, link) {
				
			},
			// banner detail
			toGoodsInfos(ids) {
				
			},
			// banner 分类
			toGoodsoft(ids) {
				
			},
			// banner 店铺
			toGoodvendor(ids) {
				
			},
			// banner h5
			async toGoodH5(ids) {

			}
		}
	}
</script>

<style>
	.swiper-container {
		background-color: $app-color-back;
		padding: 24rpx 16rpx;
	}

	.swiper-container2 {
		background-color: $app-color-back;
		/* padding: 24rpx 16rpx; */
	}
</style>
